<template>
  <div class="userinfo">
    <input ref="file" type="file" @change="changeAvater" hidden />
    <!-- 导航栏 -->
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />
    <van-cell
      class="avater"
      title="头像"
      size="large"
      @click="$refs.file.click()"
      is-link
    >
      <template #default>
        <van-image class="pic" round :src="userinfo.pgoto" />
      </template>
    </van-cell>

    <!-- 名称 -->
    <van-cell
      title="名称"
      size="large"
      :value="userinfo.name"
      @click="isNcShow = true"
      is-link
    />

    <!-- 简介 -->
    <van-cell
      title="简介"
      size="large"
      :value="userinfo.intro || '未填写'"
      is-link
      @click="isIntroShow = true"
    />

    <!-- 性别生日 -->
    <div class="bottom">
      <van-cell
        title="性别"
        size="large"
        :value="userinfo.gender === 0 ? '男' : '女'"
        is-link
        @click="genderPupShow = true"
      />
      <van-cell
        title="生日"
        size="large"
        :value="userinfo.birthday"
        @click="birthPupShow = true"
        is-link
      />
    </div>

    <!-- 退出按钮 -->
    <div class="logout">
      <van-button type="info" @click="out">退出登录</van-button>
    </div>

    <!-- 名称弹层 -->
    <van-popup v-model="isNcShow" position="bottom" :style="{ height: '100%' }">
      <Nickname
        @editName="editName"
        @close="isNcShow = false"
        :name="userinfo.name"
      />
    </van-popup>

    <!-- 简介弹层 -->
    <van-popup
      v-model="isIntroShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <IntroPup
        @editIntro="editIntro"
        @close="isIntroShow = false"
        :intro="userinfo.intro"
      />
    </van-popup>

    <!-- 性别 -->
    <van-popup v-model="genderPupShow" position="bottom">
      <GenderPup
        v-if="genderPupShow"
        :gender="userinfo.gender"
        @editGender="editGender"
        @closeGenderPup="genderPupShow = false"
      />
    </van-popup>

    <!-- 生日 -->
    <van-popup v-model="birthPupShow" position="bottom">
      <BirthPup
        v-if="birthPupShow"
        :birth="userinfo.birthday"
        @close="birthPupShow = false"
        @editBirth="editBirth"
      />
    </van-popup>

    <!-- 上传头像 -->
    <van-popup
      v-model="avaterPupShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <AvaterPup
        v-if="avaterPupShow"
        :img="img"
        @close="avaterPupShow = false"
        @editImg="editImg"
      />
    </van-popup>
  </div>
</template>

<script>
import AvaterPup from './components/avater-pup.vue'
import BirthPup from './components/birthPup.vue'
import GenderPup from './components/gender-pup.vue'
import IntroPup from './components/intro-pup.vue'
import Nickname from './components/nickname-pup.vue'
import { getUserInfo } from '../../api/my'
export default {
  name: 'UserInfoIndex',
  data () {
    return {
      userinfo: {},
      isNcShow: false,
      isIntroShow: false,
      genderPupShow: false,
      birthPupShow: false,
      avaterPupShow: false,
      img: null
    }
  },
  components: {
    Nickname,
    IntroPup,
    GenderPup,
    BirthPup,
    AvaterPup
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      const { data } = await getUserInfo()
      this.userinfo = data
    },
    // 编辑名字
    editName (name) {
      this.userinfo.name = name
      this.isNcShow = false
    },
    // 编辑个人简介
    editIntro (intro) {
      this.userinfo.intro = intro
      this.isIntroShow = false
    },
    editGender (i) {
      this.genderPupShow = false
      this.userinfo.gender = i
    },
    editBirth (birth) {
      this.userinfo.birthday = birth
      this.birthPupShow = false
    },
    // 退出
    out () {
      this.$store.commit('logout')
      this.$router.push('/login')
    },
    // 修改头像
    changeAvater () {
      const files = this.$refs.file.files[0]
      this.img = window.URL.createObjectURL(files)
      this.avaterPupShow = true
      this.$refs.file.value = ''
    },
    // 修改头像
    editImg (img) {
      this.userinfo.photo = img
      this.avaterPupShow = false
    }
  }
}
</script>

<style scoped lang="scss">
.userinfo {
  .avater {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 16px;
  }
  .pic {
    width: 30px;
    height: 30px;
  }
  .bottom {
    border-top: 20px solid #efefef;
  }
}
.logout {
  display: flex;
  width: 100%;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  .van-button {
    width: 100%;
  }
}
</style>
